<!-- 接口分析 -->
<template>
	<div>
		<!-- 数据列表 -->
		<yd-table
			:formData="extendData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="handlerSearch"
			@currentChangeHandler="handlerSearch"
			@sortChangeHandler="handlerSearch"
		></yd-table>
	</div>
</template>

<script setup name="StepList" lang="ts">
import { apiAnalysis, stepToBaseAlarmListDownLoad } from '@/api/ops-workbench/business-alarm-analysis/index';
import { randomUUID, downloadFromBlob } from '@/utils/common';
import { ref, reactive, onMounted, onActivated } from 'vue';
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();
const props = defineProps({
	params: {
		type: Object,
		default: () => {},
	},
});
const emit = defineEmits(['setpClick']);

const openshow = ref(false);
const dialog = reactive({
	key: randomUUID(),
	open: false,
});
const exportLoading = ref(false);
// 表单额外参数
const extendData = ref<anyObj>({});
// 关联查询参数
const queryData = reactive<anyObj>({});
// 列表配置
const tableConfig = reactive({
	columns: [
		{
			label: '请求源',
			prop: 'requestIpPort',
		},
		{
			label: '调用量',
			prop: 'sumReqCount',
		},
		{
			label: '最早调用时间',
			prop: 'minTime',
		},
		{
			label: '最新调用时间',
			prop: 'maxTime',
		},
	],
	pagination: {
		pageSize: 4,
		pageNum: 1,
		total: 0,
	},
	pageSizes: [4, 10, 20, 30, 50, 100],
	loading: true,
});
// 列表数据
const tableData = ref<any[]>([]);

function reloadList(e: anyObj) {
	extendData.value = e;
	handlerSearch();
}
// 搜索
function handlerSearch() {
	const formData = {
		...extendData,
		...queryData,
	};
	tableConfig.loading = true;
	apiAnalysis(formData).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code === 0) {
			tableData.value = res.data.data;
			tableConfig.pagination.total = res.data.total;
			dataCL();
		} else {
			proxy.$modal.msgError(res.msg);
		}
	});
}
function dataCL() {
	let list = [];
	for (let i of tableData.value) {
		list.push(i.stepCode);
	}
	emit('setpClick', list);
}

// 关闭告警统计列表
function handleClose() {
	dialog.key = randomUUID();
	openshow.value = false;
	dialog.open = false;
}
//下载
function handleClassifyExport() {
	const d: anyObj = {
		...queryData,
	};
	d.alarmRequestType = 1;
	d.alarmIndicatorName = '响应慢请求量';
	exportLoading.value = true;
	stepToBaseAlarmListDownLoad(d).then((res) => {
		downloadFromBlob(res, '', '失败率高告警分析 - 步骤告警明细  ' + queryData.endTime.replace(/\D/g, '') + '.xlsx').then((o) => {
			exportLoading.value = false;
			if (!o.flag) {
				proxy.$modal.msgWarning(o.msg);
			}
		});
	});
}
function initQuery() {
	for (let key in proxy.$route.query) {
		queryData[key] = proxy.$route.query[key];
	}
}

onMounted(() => {
	initQuery();
	handlerSearch();
});
onActivated(() => {
	initQuery();
	handlerSearch();
});

defineExpose({
	reloadList,
});
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dialogTitle {
	font-size: 20px;
	color: #fff;
	font-weight: 900;
	margin-top: -33px;
	width: 80%;
}
.icon-cls {
	width: 20px;
	height: 20px;
	color: #00ffff;
}
</style>
